<!-- 通话趋势分析 -->
<template>
	<div id="callTrendAnalysis">
		<div class="statis">
			<div class="statis-title card">通话结果分析</div>
			<div class="statis-chart">
				<div id="chartTop" class="card"></div>
				<div class="card">
					<div id="pieLeft"></div>
					<div id="pieRight"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup name="callTrendAnalysis">
	import { onMounted, onUnmounted, nextTick } from 'vue'
	import * as echarts from 'echarts'
	import { throttle } from 'lodash'
	import biChartApi from '@/api/bi/biChartApi.js'

	// ===========================================DATA======================================================
	let colorList = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1', '#2A5CEA', '#96BAE4'] //antdv色值
	let chartTopDom
	let cycleLeftDom
	let cycleRightDom
	let mixChartTop
	let cycleLeft
	let cycleRight
	let mixChartTopOption = ref({
		color: colorList,
		title: {
			text: '调解总量统计',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '2.5%'
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['呼叫总数（个）', '接通总数（个）', '接通总时长（分钟）', '响铃总时长（分钟）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: [
					'04-01',
					'04-02',
					'04-03',
					'04-04',
					'04-05',
					'04-06',
					'04-07',
					'04-08',
					'04-09',
					'04-10',
					'04-11',
					'04-12',
					'04-13',
					'04-14'
				],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '总数',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			},
			{
				type: 'value',
				// name: '时长',
				// min: 0,
				// max: 25,
				// interval: 5,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '呼叫总数（个）',
				type: 'bar',
				data: [
					2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
					182.2, 48.7, 18.8, 6.0, 2.3
				]
			},
			{
				name: '接通总数（个）',
				type: 'bar',
				data: [
					2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
					182.2, 48.7, 18.8, 6.0, 2.3
				]
			},
			// {
			// 	name: '接通率',
			// 	type: 'bar',
			// 	tooltip: {
			// 		valueFormatter: function (value) {
			// 			return value
			// 		}
			// 	},
			// 	data: [
			// 		2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
			// 		182.2, 48.7, 18.8, 6.0, 2.3
			// 	]
			// },
			{
				name: '接通总时长（分钟）',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [
					2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 18.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 15.2, 10.3, 23.4,
					23.0, 16.5, 12.0, 6.2
				]
			},
			{
				name: '响铃总时长（分钟）',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [
					5.0, 2.2, 6.6, 4.5, 16.3, 10.2, 20.3, 13.4, 23.0, 16.5, 15.0, 20.2, 5.0, 2.2, 6.6, 4.5, 16.3, 10.2, 20.3,
					13.4, 23.0, 16.5, 15.0, 30.2
				]
			}
		]
	})
	let cycleLeftOption = ref({
		color: colorList,
		title: {
			text: '呼出类型分布',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '6%'
		},
		tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			},
			formatter: function (params) {
				// 使用 echarts 内置的 valueFormatter 保留千位分隔符
				return `${params.name}: ${params.value.toLocaleString()} 个`
			}
		},
		legend: {
			show: false
		},
		series: [
			{
				// name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: true,
				label: {
					show: true,
					position: 'outside',
					color: '#fff',
					formatter: function (params) {
						return `${params.name}:${(params.data.rate * 100).toFixed(2)}%`
					}
					// formatter: function (params) {
					// 	// 计算总数
					// 	const total =
					// 		params.data.value +
					// 		cycleLeftOption.value.series[0].data.reduce((sum, item) => {
					// 			if (item.name !== params.name) {
					// 				return sum + item.value
					// 			}
					// 			return sum
					// 		}, 0)
					// 	// 计算百分比
					// 	const percent = ((params.value / total) * 100).toFixed(2)
					// 	return `${params.name}: ${percent}%`
					// }
				},
				labelLine: {
					show: true
				},
				// emphasis: {
				// 	label: {
				// 		show: true,
				// 		fontSize: 40,
				// 		fontWeight: 'bold'
				// 	}
				// },
				data: [
					{ value: 10, name: '呼入' },
					{ value: 20, name: '呼出' },
					{ value: 30, name: '单点外呼' },
					{ value: 40, name: '预测外呼' }
				]
			}
		]
	})
	let cycleRightOption = ref({
		color: colorList,
		title: {
			text: '呼出结果分布',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '6%'
		},
		tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			},
			formatter: function (params) {
				// 使用 echarts 内置的 valueFormatter 保留千位分隔符
				return `${params.name}: ${params.value.toLocaleString()} 个`
			}
		},
		legend: {
			show: false
		},
		series: [
			{
				// name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: true,
				label: {
					show: true,
					position: 'outside',
					color: '#fff',
					formatter: function (params) {
						return `${params.name}:${(params.data.rate * 100).toFixed(2)}%`
					}
					// formatter: function (params) {
					// 	// 计算总数
					// 	const total =
					// 		params.data.value +
					// 		cycleLeftOption.value.series[0].data.reduce((sum, item) => {
					// 			if (item.name !== params.name) {
					// 				return sum + item.value
					// 			}
					// 			return sum
					// 		}, 0)
					// 	// 计算百分比
					// 	const percent = ((params.value / total) * 100).toFixed(2)
					// 	return `${params.name}: ${percent}%`
					// }
				},
				labelLine: {
					show: true
				},
				data: [
					{ value: 10, name: '号码不存在' },
					{ value: 20, name: '不在服务区' },
					{ value: 30, name: '成功' },
					{ value: 40, name: '无人接听' },
					{ value: 40, name: '正忙' }
				]
			}
		]
	})
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		setTimeout(async () => {
			// 折柱图
			chartTopDom = document.querySelector('#callTrendAnalysis #chartTop')
			mixChartTop = echarts.init(chartTopDom)
			//环图-左
			cycleLeftDom = document.querySelector('#callTrendAnalysis #pieLeft')
			cycleLeft = echarts.init(cycleLeftDom)

			//环图-右
			cycleRightDom = document.querySelector('#callTrendAnalysis #pieRight')
			cycleRight = echarts.init(cycleRightDom)
			// 调用接口
			const biResult = await getData()
			// console.log('CALL_TREND_ANALYSIS_DAY', biResult)
			//调解总量统计
			mixChartTopOption.value.xAxis[0].data = []
			mixChartTopOption.value.series[0].data = []
			mixChartTopOption.value.series[1].data = []
			mixChartTopOption.value.series[2].data = []
			mixChartTopOption.value.series[3].data = []
			biResult.callSummaryStatistics.forEach((item) => {
				mixChartTopOption.value.xAxis[0].data.push(item.currentDate.substr(5))
				mixChartTopOption.value.series[0].data.push(item.total)
				mixChartTopOption.value.series[1].data.push(item.completionTotal)
				mixChartTopOption.value.series[2].data.push(item.totalCallDuration)
				mixChartTopOption.value.series[3].data.push(item.ringDuration)
			})
			//呼出类型分布
			cycleLeftOption.value.series[0].data = biResult.callTypeDistribution
			//呼出结果分布
			cycleRightOption.value.series[0].data = biResult.callResultDistribution
			// 渲染
			mixChartTop.setOption(mixChartTopOption.value)
			cycleLeft.setOption(cycleLeftOption.value)
			cycleRight.setOption(cycleRightOption.value)
		}, 1000)
		// 自适应大小
		const callTrendResize = throttle(() => {
			setTimeout(() => {
				mixChartTop && mixChartTop.resize()
				cycleLeft && cycleLeft.resize()
				cycleRight && cycleRight.resize()
			}, 500)
		}, 200)
		window.addEventListener('resize', callTrendResize)
	})
	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', callTrendResize)
		mixChartTop && mixChartTop.dispose()
		cycleLeft && cycleLeft.dispose()
		cycleRight && cycleRight.dispose()
	})
	// ===========================================METHODS==================================================
	// ===========================================REQUEST==================================================
	const getData = async () => {
		const res = await biChartApi.getResultByType('CALL_TREND_ANALYSIS_DAY')
		return JSON.parse(res.biResult)
	}
</script>
<style lang="less" scoped>
	#callTrendAnalysis {
		.statis-title {
			font-size: 20px;
			font-weight: 600;
			text-align: left;
			margin-bottom: 0;
			letter-spacing: 4px;
			line-height: 20px;
		}
		.statis {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			.statis-chart {
				flex: 1;
				display: flex;
				flex-direction: column;
				> div {
					flex: 1;
					// width: 100%;
					// height: 48%;
				}
				> div:nth-child(1) {
					margin: 10px 0;
				}
				> div:last-child {
					display: flex;
					justify-content: space-between;
					> div {
						flex: 1;
					}
				}
			}
		}
	}
</style>
